import React, { Component } from 'react';

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            msg: "",
            arr: []
        }
    }
    handleChange = (e) => {
        this.setState({
            msg: e.target.value
        })
    }
    handleEnter = (e) => {
        if (e.keyCode === 13) {
            var arr = this.state.arr;
            if (!arr.includes(this.state.msg)) {
                arr.push(this.state.msg)
            }
            this.setState({
                arr,
                msg: ""
            })
        }
    }
    handleDelete = (item) => {
        var arr = this.state.arr;
        arr.splice(arr.indexOf(item), 1);
        this.setState({
            arr
        })
    }
    render() {
        return (
            <div>
                todoclass
                <input type="text" value={this.state.msg} onChange={this.handleChange} onKeyUp={this.handleEnter} />
                <div>
                    {this.state.arr.map(item => {
                        return (
                            <p key={item}>{item} <button onClick={() => { this.handleDelete(item) }}>删除</button></p>
                        )
                    })}
                </div>
            </div>
        );
    }
}

export default Index;